<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>fullPage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="Description...">
    <meta name="keywords" content="keyword1,keyword2,keyword3..">
    <meta name="author" content="chriswang,396276123@qq.com">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <style type="text/css">
    html {
        -ms-touch-action: none;  /* 阻止windows Phone 的默认触摸事件 */
    }
    body,
    div,
    p,
    ul,
    li {
    	margin: 0;
    	padding: 0;
    }
    ul {
        list-style: none;
    }
    body {
    	width: 100%;
        *cursor: default;
    	overflow: hidden;
    	font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial;
    }
    #pageContain {
    	overflow: hidden;
    }
    .page {
    	display: none;
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    .contain {
    	width: 100%;
    	height: 100%;
    	display: none;
    	position: relative;
    	z-index: 0;
    }
    .current .contain,.slide .contain {
    	display: block;
    }
    .current {
    	display: block;
    	z-index: 1;
    }
    .slide {
    	display: block;
    	z-index: 2;
    }
    .swipe {
        display: block;
        z-index: 3;
        transition-duration: 0ms !important;
        -webkit-transition-duration: 0ms !important;
    }
    .page1 {
    	background: #37c1e3;
    }
    .page2 {
    	background: #009922;
    }
    .page3 {
    	background: #992211;
    }
    .page4 {
    	background: #ff00ff;
    }
    .page5 {
    	background: #00ff00;
    }
    .page6 {
    	background: #22ffff;
    }
    #navBar {
    	z-index: 3;
    	position: absolute;
        font-size: 0px;
        line-height: 0;
    	bottom: 10px;
        text-align: center;
        width: 200px;
    	left: 50%;
        margin-left: -100px;
    }
    #navBar .active {
        background: #ccc;
    }
    #navBar li {
        background: transparent;
        border: 1px solid #ccc;
        display: inline-block;
        font-size: 0px;
        margin: 0 4px;
        *float: left;
        *zoom:1;
        cursor: pointer;
        transition: all .7s ease;
        border-radius: 50%;
        line-height: 10px;
        text-align: center;
        width: 10px;
        height: 10px;
    }
    #prev,#next {
        z-index: 4;
        text-align: center;
        line-height: 40px;
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        cursor:pointer;
        margin-top: -20px;
    }
    #prev {
        left: 0
    }
    #next {
        right: 0
    }
    .nav {
        z-index: 5;
        position: fixed;
        _position:absolute;
        background: #fff;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
    }
    .nav li {
        display: inline;
        float: right;
        margin: 0 12px;
    }
    </style>
</head>
<!--[if lte IE 7]>      
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!--> 
<body> 
<!--<![endif]-->
<div class="nav">
    <ul>
        <li>ABOUT</li>
        <li>VIEW</li>
        <li>CASE</li>
        <li>SERVICE</li>
        <li>HOME</li>
    </ul>
</div>
	<div id="pageContain">
		
		<div class="page page1 current">
			<div class="contain">
				
			</div>
		</div>

		<div class="page page2">
			<div class="contain">
				
			</div>
		</div>

		<div class="page page3">
			<div class="contain">
				
			</div>
		</div>

		<div class="page page4">
			<div class="contain">
				
			</div>
		</div>
	</div>
	<ul id="navBar">
		<li></li>
		<li></li>
		<li></li>
 		<li></li>
	</ul>
    <div id="prev">&lt;</div>
    <div id="next">&gt;</div>

<script type="text/javascript" src="js/fullPage.min.js"></script>
<script type="text/javascript">
	
var runPage,
    interval,
    autoPlay;

autoPlay = function(to) {

    clearTimeout(interval);
    interval = setTimeout(function() {
        runPage.go(to);
    }, 3000);

}

runPage = new FullPage({

	id : 'pageContain',                            // id of contain
	slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
        	translate : 'X',					   // 'X'|'Y'|'XY'|'none'
        	scale : [1, 1],					   // [scalefrom, scaleto]
        	rotate : [0, 0]					   // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },                           
	mode : 'touch,nav:navBar',               // mode of fullpage
	easing : [0, .93, .39, .98],                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    callback : function(index, thisPage) {     // callback when pageChange

        index = index + 1 > 3 ? 0 : index + 1;
        autoPlay(index);
    }
});

interval = setTimeout(function() {
    runPage.go(runPage.thisPage() + 1);
}, 3000);

</script>

<script type="text/javascript">
    
    var prev = document.getElementById('prev'),
        next = document.getElementById('next');
    
    prev.onclick = function() {
        runPage.go(runPage.thisPage() - 1);
    }
    next.onclick = function() {
        runPage.go(runPage.thisPage() + 1);
    }

</script>
</body>
</html>
